<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>设置密码</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        html,
        body {
            background-color: #fff;
        }

        .wrap {
            width: 100%;
            padding: 34px;
            overflow: hidden;
        }

        .wrap .title {
            width: 100%;
            height: 21px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 800;
            color: #333333;
            line-height: 21px;
        }

        .box_input {
            width: 100%;
            padding: 15px 0;
            margin-top: 20px;
            overflow: hidden;
        }

        .box_input input {
            display: block;
            width: 100%;
            height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 17px;
        }

        .tips {
            width: 100%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .login_btn {
            width: 100%;
            margin-top: 27.5px;
            box-sizing: border-box;
            height: 40px;
        }

        .login_btn button {
            width: 100%;
            height: 100%;
            border: none;
            line-height: 40px;
            /*background: rgba(108, 105, 255, 1);
            box-shadow: 0px 17px 40px 0px rgba(123, 102, 255, 0.22);*/
            border-radius: 20px;
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            opacity: 0.3;
        }

        .active {
            opacity: 1!important;
        }

        .aui-btn-success {
            color: #ffffff;
            background-color: #009688;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="title">设置密码</div>
            <div class="box_input">
                <input type="password" placeholder="请输入密码" @input='change()' v-model='psw'>
            </div>
            <div class="tips">密码由8-16个字符组成。必须包含字母、数字、符号至少两种</div>
            <div class="login_btn">
                <button class="aui-btn aui-btn-success" :disabled="disabled" :class="active" @click='confirm()'>下一步</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {

    }
    var vm = new Vue({
        el: '#app',
        data: {
            psw: '',
            disabled: true,
            active: ''
        },
        methods: {
            change: function() {
                if (vm.psw.length > 6) {
                    vm.active = 'active';
                    vm.disabled = false
                } else {
                    vm.active = '';
                    vm.disabled = true
                }
            },
            confirm: function() {
                if (!cl.passwordVerify.test(vm.psw)) {
                    api.toast({
                        msg: '密码由6-10位数字/字母组合',
                        duration: 2000,
                        location: 'bottom'
                    });
                    return;
                }
                api.ajax({
                    url: cl.apiServer + 'member/updateMember',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token:api.pageParam.token
                    },
                    data: {
                        body: {
                            id: api.pageParam.id,
                            pwd: vm.psw,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret.code == 0) {
                        cl.openWin({
                            name: 'set_password_status'
                        })
                    }else{

                    }
                })
            }
        }
    });
</script>

</html>
